echarts使用技巧（一）echarts的图表自适应resize问题、单选、缩放等

2023-10-24 11:34| 来源: 网络整理| 查看: 265

　　这些东西要是有精力和时间可以通读echarts文档，里面都有配置详细介绍。该博客只是把自己使用echarts遇到的问题记录下，并不全，加深印象，抛砖引玉而已，完整学习的请移步官方文档

1、legend设置单选

legend: { data:['db block gets', 'consistent gets'], selectedMode: 'single', },

　　修改图例legend颜色，定义color数组，对应图例即可

color:['#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'], //手动设置每个图例的颜色 legend: { //图例组件 right:68, //图例组件离右边的距离 orient : 'vertical', //布局纵向布局 width:40, //图行例组件的宽度,默认自适应 x : 'right', //图例显示在右边 itemWidth:10, //图例标记的图形宽度 itemHeight:10, //图例标记的图形高度 data:['30%','10%','15%','20%','25%'], textStyle:{ //图例文字的样式 color:'#333', fontSize:12 } },

2、添加缩放滚动

　　加上dataZoom配置

dataZoom: [ { show: true, realtime: true, start: 65, end: 85 }, { type: 'inside', realtime: true, start: 45, end: 85 } ],

　　需要配合grid配置给dataZoom留出底部位置

　　也可以将show设置为false就不会显示那个滚动图，但是依然有滚动效果

grid: { top: 30, bottom: 60 },

3、视图里面添加多个线条：在series数组里面继续加对象即可

series: [ { name:'db block gets', type:'line', xAxisIndex: 1,//加这个dataZoom对该对象不起作用，需要去掉这个属性 smooth: true,//代表平滑曲线，如需要折线，则去掉即可 data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }, { name:'consistent gets', type:'line', smooth: true, data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7] } ]

4、视图里面加阴影提示：tooltip，提示框组件

　　show，默认true，是否显示提示框组件

　　trigger，触发类型，item、axis、none，当为none的时候代表什么都不触发，就不会显示提示框

　　axisPointer，坐标轴指示器配置项，实际上坐标轴指示器的全部功能，都可以通过轴上的 axisPointer 配置项完成

　　label属性加formatter函数，可以格式化提示框显示内容

tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label:{ formatter: function (params) { return '快照时间：' + params.value; } } } },

5、雷达图添加阴影提示

series: [ { type: 'radar', tooltip: { trigger: 'item' }, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data: [ { value: this.radarValues, name: '指标值' } ] } ]

6、一般echarts里面配色都是默认的，如果需要修改，就加上 color:[]配置项，这里也推荐一个取色器，很好用Pipette

7、stackedBar图形配置

{ name: '表使用比例', type: 'bar', stack: '总量',//代表叠加的形态，如果去掉这个，该条就会单独出来 label: { //就是每条目上会显示数字，去掉label属性就不显示 normal: { show: true, position: 'insideRight' } }, data: [20, 2, 1, 34, 20] },

8、legrend的data数组里面的内容必须与series配置里面对象的name完全一样，否则会不显示。所以当你legrend不显示的时候，一定是这里没对应上，修改即可。

9、echarts的图表自适应，resize问题

　　echarts官网的实例都具有响应式功能，确实不是单纯的宽度改变，是每次调整后图表是重新绘制。猜想echart源码里应该有resize这个API，打开调试器，打开echart源码，Ctrl+F，果然找到了

　　再看官方文档

　　echart图表本身是提供了一个resize的函数的。

　　于是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

　　用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件

　　当然这是单个图表的情况，要是多个图表，发现会不起作用。

　　多个图表可以使用addEventListener

window.addEventListener("resize", () => { this.myChart.resize(); this.myChart2.resize(); this.myChart3.resize(); });

在vue组件上就可以直接单个组件添加进事件列表

myLogLine.setOption(option); window.addEventListener("resize", () => { myLogLine.resize();}); myLine.setOption(option); window.addEventListener("resize", () => { myLine.resize();});

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章